
import Add from '../componets/infos/add.js';
import Delete from '../componets/infos/delete.js';
import Search from  '../componets/infos/seach.js';
import Update from '../componets/infos/update.js'

let { form, $, table, layer, laydate} = layui;
export default class Infos {
    constructor(obj) {
        this.render();
        this.handle(obj)
    }
    render() {
        let template = `
        <!DOCTYPE html>
            <html lang="en">
            <head>
            <style>
                .type {
                width: 80px;              
                }
                .addMessage {
                margin: 30px 0 0 -10px;
                }
            </style>
            </head>

            <body>
            <!-- 工具栏 -->
            <script type="text/html" id="tools">
                <!-- 加上form表单才能通过lay-filter获取数据 -->
                <form class="layui-form" lay-filter="search" action="">
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn layui-btn-sm" lay-event="add">
                        <i class="layui-icon">&#xe654;</i>
                    </button>
                </div>
                    <div class="layui-input-inline type">
                    <select name="type" >
                        <option value="title">标题</option>
                        <option value="watches">已浏览人数</option>
                    </select>
                    </div>

                    <div class="layui-input-inline value">
                    <input type="text" name="value" placeholder="请输入搜索条件" class="layui-input">
                </div>
                   <div class="layui-input-inline value">
                        <input  type="text" name="startDate" placeholder="请输入搜索的开始时间" class="layui-input datetime">
                        </div>
                        <!-- readonly  让用户不能在输入框中输入-->
                        <div class="layui-input-inline value">
                        <input  type="text" name="endDate" placeholder="请输入搜索的结束时间" class="layui-input datetime">
                        </div>

                    <div class="layui-input-inline">
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm search" lay-event="find">
                            <i class="layui-icon">&#xe615;</i>
                        </button>
                    </div>
                </form>
            </script>
            <!-- 表格 -->
            <table id="infosTable" lay-filter="infosTable"></table>
            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="update">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
             </script>
             <script type="text/html" id="addTemplate">
             </script>
             <script type="text/html" id="updateTemplate">
             </script>
        `;
        $("#content").html(template);
    }
    handle() {
        function popup(filter) { //弹出层
            return `
                <form class="layui-form  addMessage" action="" lay-filter="${filter}">
                  <div class="layui-form-item addTitle">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-inline">
                      <input type="text" name="title" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                  </div>
      
                  <div class="layui-form-item addCreateTime">
                    <label class="layui-form-label">发表时间</label>
                    <div class="layui-input-inline">
                      <input type="text" name="createTime" required lay-verify="required" placeholder="" autocomplete="off"
                        class="layui-input">
                    </div>
                  </div>

                  
                </form>
           `
        }
        //查询，在页面上渲染
        table.render({
            elem: '#infosTable', //table的id
            url: '/infos', //数据接口
            method: "get", //接口http请求类型，默认：get
            // contentType: "application/json",//查询字符串改为JSON
            toolbar: "#tools",//工具栏
            page: true,  //laiui中分页
            limit: 5,//显示5条数据
            limits: [5, 10, 15, 20], //选择一页显示数据的数量
            request: {
                pageName: 'current',  //页码参数名称，默认page
                limitName: 'pageSize'  //每页数量的参数名，默认是limit
            },
            parseData: function (res) {  //与后端交互
                return {
                    code: 0,  //layui正确的格式
                    count: res.data.total,  //count解析过来数据的长度
                    data: res.data.rows //解析数据列表
                }
            },
            //增加之后才能弹出选择日期
            done(){  //事件，必须在渲染后才触发
                laydate.render({  //layui实例
                  elem:".datetime",
                  type:'datetime'
                })
              },
            cols: [[ //表头
                {
                    field: 'title',
                    title: '标题',
                },
                {
                    field: 'createTime',
                    title: '发表时间',
                },
                {
                    field: 'watches',
                    title: '浏览人数',
                },
                {
                    field: 'content',
                    title: '资讯内容',
                },

                { field: 'doing', title: '操作', templet: '#barDemo' } //templet自定义列模板
            ]]
        });
        // 工具栏操作
        table.on('toolbar(infosTable)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                //添加学生
                case 'add':
                    new Add()
                    break;
                //搜索
                case 'find':
                    new Search();
                    break
            };
        });

        // 修改，删除
        table.on('tool(infosTable)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            // var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if (layEvent === 'delete') { //删除
                layer.confirm('真的删除行么', function (index) {
                    new Delete(obj)
                    //  console.log(id);
                });
            } else if (layEvent === 'update') {
                new Update(obj)
            }
        })
    }
}
